<template>
	<view class="perfect">
		<view class="title">
			<u-icon name="arrow-left" size="24" @click="back"></u-icon>
			<text style="margin-left: 24rpx;">完善信息</text>
		</view>
		<view class="" style="height: 176rpx;">
			
		</view>
		<view class="scroll-Y">
			<view class="perfectmessageBox">
				<view class="selectbox" style="padding-top:0rpx ;">
					<view class="titleselect">
						姓名
					</view>
					<view class="inputbox">
						<u--input v-model="formData.name" placeholder="请输入" border="bottom" clearable
							@input="handleName"></u--input>
					</view>
				</view>

				<view class="selectbox ">
					<view class="titleselect">
						性别
					</view>
					<view class="inputbox border" @click="handlesexselect">
						<view class="selecttext">
							<view v-if="!formData.sex" class="selectpolice">
								请选择
							</view>
							<view v-else class="" style="color: black; text-indent: 10rpx;">
								{{formData.sex}}
							</view>
						</view>




					</view>
				</view>
				<view class="selectbox">
					<view class="titleselect">
						毕业院校
					</view>
					<view class="inputbox">
						<u--input v-model="formData.school" placeholder="请输入" border="bottom" clearable
							@input="handleschool"></u--input>
					</view>
				</view>
				<view class="selectbox ">
					<view class="titleselect">
						导师类别
					</view>
					<view class="inputbox border" @click="handlesleibieselect">
						<view class="selecttext">
							<view v-if="!formData.category_text" class="selectpolice">
								请选择
							</view>
							<view v-else class="" style="color: black; text-indent: 10rpx;">
								{{formData.category_text}}
							</view>
						</view>

					</view>
				</view>

				<view class="selectbox ">
					<view class="titleselect">
						擅长学术领域
					</view>
					<view class="inputbox border" @click="handlesdirectionselect">
						<view class="selecttext">
							<view v-if="!formData.direction" class="selectpolice">
								请选择
							</view>
							<view v-else class="" style="color: black; text-indent: 10rpx;">
								{{formData.direction}}
							</view>
						</view>

					</view>
				</view>

				<view class="selectbox">
					<view class="titleselect">
						个人简介
					</view>
					<view class="inputbox">
						<u--textarea v-model="formData.introductory" placeholder="请输入" border="bottom"
							@input="handleintroductory"></u--textarea>
					</view>
				</view>
				<view class="selectbox">
					<view class="titleselect">
						个人照片
					</view>
					<view class="imgandmessage">
						<view class="imgsbox" v-for="item in zhaopianimgs">
							<view class="delIcon">
								<u-icon name="close-circle" color="#ffffff" size="28" @click="haneldelzpImg"></u-icon>
							</view>
							<image class="imgsOne LoadImg" :src="item"></image>
						</view>
						<image v-if="iszpFlag" class="uploadimg"
							src="http://sssx.nanjingyunpeng.cn/uploads/tupian/image/uplodimg.png"
							@click="uploadzhaopian"></image>
					</view>
				</view>
				<view class="selectbox">
					<view class="titleselect">
						荣誉证书
					</view>
					<view class="imgandmessage">
						<view class="imgsbox" v-for="(item,index) in zhengshuimgs">
							<view class="delIcon">
								<u-icon name="close-circle" color="#ffffff" size="28"
									@click="haneldelImg(index)"></u-icon>
							</view>
							<image class="imgsOne LoadImg" :src="item"></image>
						</view>
						<image v-if="iszsFlag" class="uploadimg"
							src="http://sssx.nanjingyunpeng.cn/uploads/tupian/image/uplodimg.png"
							@click="uploadzhengshu"></image>
					</view>
				</view>

			</view>
			<view class="uploadfile">
				<view class="titletop">
					<view class="left">
						附件
					</view>
					<view  v-if="fujianData.length==0" class="right" @click="upLoadFile">
						上传
					</view>
					
				</view>
				<view class="fileBox">
					<view class="fileitem" v-for="(item,index) in fujianData" :key="item.id">
						<view class="imgbox">
							<image class="" style="width: 100%; height: 100%;" src="../../static/image/files.png"></image>
						</view>
						<view class="fileName">
							{{item.name}}
						</view>
						<view class="imgbox">
							<image class="" style="width: 100%; height: 100%;" src="../../static/delicon.png"
								@click="delFujian(index)"></image>
						</view>

					</view>
				</view>
			</view>

		</view>
		
		<u-picker :show="leibieshow" :columns="leibiecolumns" @confirm="confirmleibie" @cancel="closeleibie"
			@change="changeleibie" keyName="name"></u-picker>
		<u-picker :show="directionshow" :columns="directioncolumns" @confirm="confirmdirection" keyName="name"
			@cancel="closedirection"></u-picker>
		<u-picker :show="sexshow" :columns="sexcolumns" :closeOnClickOverlay='true' @confirm="confirmsex"
			@cancel="closesex" @change="changeHandler"></u-picker>
			
			<view class="" style="height: 200rpx;"></view>
		<view class="savebox">
			<view class="savesub" @click="$u.debounce(savaTeacherData, 500)">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		teachereditoradd,
		science,
		teacherCurrent,
		teacherCategory
	} from "@/api/api.js"
	export default {
		data() {
			return {
				formData: {
					name: "", //姓名
					sex: "", //性别
					category_text: "", //类别名字
					category_id: "", //类别Id
					direction: "", //擅长学术领域
					science_ids: "", //擅长学术领域id
					introductory: "", //简介
					school: "", //毕业院校
				},
				sexshow: false, //控制性别选择器
				sexcolumns: [
					["男", "女"]
				],
				leibieshow: false, //控制类别选择器
				leibiecolumns: [
					["硕士导师", "硕士/博士导师"]
				],
				directionshow: false, //控制研究方向选择器
				directioncolumns: [],
				isBack: "",
				typeShow: "",
				userId: "",
				iszsFlag: true,
				iszpFlag: true,
				zhaopianimgs: [],
				zhengshuimgs: [],
				zhaopianids: "",
				zhengshuimgs: [],
				zhengshuids: "",
				annex: "",
				// fujainIds: "",
				// fujianPath: [],
				// fujianNan
				fujianData: [],
				fujianId: '',
			}
		},
		onLoad(options) {
			console.log("options", options)
			this.isBack = options.show
			this.sciences()
			this.getMineDatas()
			this.teacherCategorys()
			this.typeShow = options.show

		},
		methods: {
			upLoadFile() {
				let that = this

				wx.chooseMessageFile({
					count: 6, //默认100
					type: 'file',
					success: function(res) {
						// console.log("上传成功", res);
						const tempFilePaths = res.tempFiles;
						console.log("tempFilePaths", tempFilePaths, tempFilePaths[0].path, tempFilePaths[0]
							.name)
						uni.uploadFile({
							// url: 'https://wlsy.nanjingyunpeng.cn/api/login/upload', 
							url: 'https://sssx.nanjingyunpeng.cn/index.php/system/Basic/upload',
							filePath: tempFilePaths[0].path,
							// fileName:tempFilePaths[0].name,
							name: 'img',
							formData: {
								'name': tempFilePaths[0].name
							},
							success: (uploadFileRes) => {
								console.log("附件上传结果", JSON.parse(uploadFileRes.data).data);
								that.fujianData.push(JSON.parse(uploadFileRes.data).data)
								that.annex = JSON.parse(uploadFileRes.data).data.id +","
							},
							fail: (err) => {

							}
						});
					}
				});

			},
			haneldelImg(index) {
				let that = this
				uni.showModal({
					// title: '提示',
					content: '确定要删除该证书吗？',
					confirmColor: '#4A9CFF',
					success: async function(res) {
						console.log("是否选择", res)
						// console.log("zhengshuids111111111", that.zhengshuids.split(','))

						if (res.confirm) {
							that.zhengshuimgs.splice(index, 1)
							that.zhengshuids = that.zhengshuids.split(',')
							// console.log("zhengshuids222222222", that.zhengshuids)
							that.zhengshuids.splice(index, 1)
							that.zhengshuids = that.zhengshuids.join()
							// console.log("zhengshuids222222222", that.zhengshuids)
						}
					}
				})
			},
			haneldelzpImg() {
				let that = this
				uni.showModal({
					// title: '提示',
					content: '确定要删除照片吗？',
					confirmColor: '#4A9CFF',
					success: async function(res) {
						console.log("是否选择", res)
						if (res.confirm) {
							that.zhaopianimgs = []
							that.zhaopianids = ''
							that.iszpFlag = true
						}
					}
				})
			},
			delFujian(index) {
				console.log("deldeldel", index)
				// return
				this.fujianData.splice(index, 1)
				this.annex = ""
			},
			async sciences() {
				let res = await science()
				if (res.code == 1) {
					console.log("专业列表", res)
					this.directioncolumns[0] = res.data
				}
			},
			async teacherCategorys() {
				let res = await teacherCategory()
				if (res.code == 1) {
					console.log("导师类别", res)
					this.leibiecolumns[0] = res.data
				}
			},
			async getMineDatas() {
				let res = await teacherCurrent()
				if (res.code == 1) {
					console.log("个人信息222", res)
					if (this.typeShow == "1") {
						this.formData.name = res.data.name
						this.formData.sex = res.data.gender
						this.formData.science_ids = res.data.science_ids
						this.formData.direction = res.data.science_ids_text +","
						this.formData.category_id = res.data.category_id
						this.formData.category_text = res.data.category_text
						this.formData.introductory = res.data.brief_introduction
						this.formData.school = res.data.school
						this.userId = res.data.id
						this.zhaopianimgs[0] = res.data.photos.url
						this.zhaopianids = res.data.photos.value
						this.annex = res.data.annex[0].value + ","
						res.data.certificate.forEach((item, index) => {
							this.zhengshuimgs.push(item.url)
							this.zhengshuids += item.value + ","
						})
						this.fujianData = res.data.annex
						this.formData.science_ids = this.formData.science_ids + "" + ","
						console.log("学术领域iddddddddd",this.formData.science_ids)
						

					}
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleschool(e) {
				this.formData.school = e
			},
			//性别处理
			handlesexselect() {
				this.sexshow = true
				console.log("this.sex", this.sexshow)
				console.log("2222")
			},
			confirmsex(e) {
				console.log('confirm', e)
				this.sexshow = false
				this.formData.sex = e.value[0]
			},
			closesex() {
				console.log("4444")
				this.sexshow = false
			},
			changeHandler(e) {
				console.log("eeeee", e)
				this.formData.sex = e.value[0]
			},
			//类别处理
			handlesleibieselect() {
				this.leibieshow = true
			},
			confirmleibie(e) {
				this.leibieshow = false
				this.formData.category_text = e.value[0].name
				this.formData.category_id = e.value[0].id
			},
			closeleibie(e) {
				this.leibieshow = false
			},
			changeleibie(e) {
				console.log("leibie ", e)
				this.formData.category_text = e.value[0].name
				this.formData.category_id = e.value[0].id
			},
			//研究方向处理
			handlesdirectionselect() {
				this.directionshow = true
			},
			confirmdirection(e) {
				this.directionshow = false
				console.log("擅长学术领域",e)
				let data = this.formData.direction
				let flag = true
				data = data.split(",")
				data.forEach((item, index) => {
					if (item == e.value[0].name) {
						flag = false
					}
				})
				if (flag) {
					
					this.formData.direction += e.value[0].name + ","
					this.formData.science_ids += e.value[0].id + ","
				} else {
					uni.showToast({
						title: '您已选择该选项！',
						icon: 'none',
						duration: 1000
					})
				}

				console.log("擅长", e.value[0].id)
			},
			closedirection(e) {
				this.directionshow = false
			},
			changedirection(e) {
				console.log("eeee", e)
				this.formData.direction = e.value[0].name
			},
			//姓名
			handleName(e) {
				// console.log("xingming",e)
				this.formData.name = e
			},

			//简介
			handleintroductory(e) {
				this.formData.introductory = e
			},
			uploadzhaopian() {
				let that = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://sssx.nanjingyunpeng.cn/index.php/system/Basic/postUploadOne', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'img',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log("图片路径", uploadFileRes.data);
									this.zhaopianimgs[0] = (JSON.parse(uploadFileRes.data)
										.path)
									this.zhaopianids = JSON.parse(uploadFileRes.data).id
									// console.log(this.imgs)
									if (this.zhaopianimgs.length == 1) {
										that.iszpFlag = false

									}
								}
							});
						}
					}
				});


			},
			uploadzhengshu() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths, tempFilePaths[0])
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://sssx.nanjingyunpeng.cn/index.php/system/Basic/postUploadOne', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'img',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log("图片路径", uploadFileRes.data);
									this.zhengshuimgs.push(JSON.parse(uploadFileRes.data)
										.path)
									this.zhengshuids += JSON.parse(uploadFileRes.data).id +
										","
									this.zhengshuids.substr(0, this.zhengshuids.length - 1)
									console.log("idsaaaaaaaaaaa", this.zhengshuids)
									// console.log(this.imgs)
									if (this.zhengshuimgs.length == 9) {
										this.iszsFlag = false
										uni.showToast({
											title: '最多可上传9张证书！',
											duration: 4000,
											icon: "none",
										});
									}
								}
							});
						}
					}
				});


			},
			async savaTeacherData() {
				this.formData.science_ids.substring(0, this.formData.science_ids.length - 1)
				console.log("this.formData", this.formData)
				// this.fujianData.forEach((item, index) => {
				// 	this.annex += item.id + ','
				// })
				console.log("fujianis", this.fujianId)
				// return
				if (this.typeShow == "1") {
					let data = {
						name: this.formData.name,
						gender: this.formData.sex,
						school: this.formData.school,
						category_id: this.formData.category_id,
						science_ids: this.formData.science_ids,
						brief_introduction: this.formData.introductory,
						photos: this.zhaopianids,
						certificate: this.zhengshuids,
						annex: this.annex,
						id: this.userId
					}
					let res = await teachereditoradd(data)
					if (res.code == 1) {
						console.log("修改成功", res)
						uni.showToast({
							title: '修改成功！',
							icon: 'none',
							duration: 1500
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},2000)
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						})
					}
				} else {
					let data = {
						name: this.formData.name,
						gender: this.formData.sex,
						school: this.formData.school,
						// category_text:this.formData.category_text,
						category_id: this.formData.category_id,
						science_ids: this.formData.science_ids,
						brief_introduction: this.formData.introductory,
						photos: this.zhaopianids,
						certificate: this.zhengshuids,
						annex: this.annex,
					}
					let res = await teachereditoradd(data)
					if (res.code == 1) {
						console.log("填写成功", res)
						uni.showToast({
							title: '填写成功！',
							icon: 'none',
							duration: 1500
						})
						setTimeout(()=>{
							uni.navigateTo({
								url: "pages/home/index"
							})
						},2000)
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						})
					}
				}


			},
		}

	}
</script>

<style scoped lang="scss">
	.scroll-Y {
		// height: 1255rpx;
	}

	.perfect {
		min-height: 100%;
		// background-color: pink;
		background: #F7F8FA;

		.title {
			width: 100%;
			height: 176rpx;
			padding-top: 110rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 38rpx;
			padding-left: 34rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			position: fixed;
			top: 0;
			z-index: 99;
		}

		.perfectmessageBox {
			width: 690rpx;
			// height: 1360rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			margin: 30rpx;
			// padding: 30rpx;
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			box-sizing: border-box;

			.selectbox {

				.titleselect {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 38rpx;
					padding-top: 60rpx;
					text-indent: 12rpx;
				}

				.inputbox {
					.selecttext {
						font-size: 30rpx;
						margin-top: 30rpx;
						font-weight: 400;
						color: #999999;
						line-height: 33rpx;

						.selectpolice {
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #C0C4CC;
							line-height: 33rpx;
							text-indent: 15rpx;
						}
					}


				}

				.imgandmessage {
					margin-top: 30rpx;

					.imgsbox {
						display: inline-block;
						margin: 7rpx;
						position: relative;
					}

					.delIcon {
						position: absolute;
						right: 0rpx;
					}

					.imgsOne {
						width: 199rpx;
						height: 199rpx;
						display: inline-block;
					}

					.handleimg {
						width: 199rpx;
						height: 199rpx;
						display: inline-block;
					}

					.uploadimg {
						margin-top: 30rpx;
						width: 199rpx;
						height: 199rpx;
					}
				}

				.border {
					border-bottom: 2rpx solid #E0E0E0;
					padding-bottom: 20rpx;
				}

			}
		}

		.uploadfile {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			margin: 30rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.titletop {
				width: 100%;
				height: 44rpx;
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 38rpx;
				}

				.right {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4A9CFF;
					line-height: 35rpx;
				}
			}

			.fileBox {
				.fileitem {
					width: 100%;
					height: 50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;

					.fileName {
						width: 500rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 38rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.imgbox {
						width: 48rpx;
						height: 48rpx;
					}
				}


			}
		}

		.savebox {
			width: 100%;
			height: 188rpx;
			background: #FFFFFF;
			padding-top: 30rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;

			.savesub {
				width: 622rpx;
				height: 88rpx;
				background: #4A9CFF;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				line-height: 88rpx;
				margin: 0 auto;
			}
		}
	}
</style>